<template>
  <div class="orders-show">
    <order-breadcrumb></order-breadcrumb>

    <div class="orders-show-content">
      <order-state-bar></order-state-bar>
      <order-info></order-info>
      <measure-pictures v-for="item in pictureType" :key="item" :panel-type="item"></measure-pictures>
      <order-price></order-price>
    </div>

    <div class="order-show-brokerage">
      <order-brokerage></order-brokerage>
    </div>
    <div class="orders-show-audit-content">
      <audit-state></audit-state>
    </div>

    <div class="orders-show-other-audit-content" v-if="order.workflow_state=='installed' || order.workflow_state=='confirm_installed'">
      <other-audit></other-audit>
    </div>
  </div>
</template>

<script>
import '../../styles/orders/show.scss'
import OrderBreadcrumb from './components/orderBreadcrumb'
import OrderStateBar from './components/orderStateBar'
import OrderInfo from './components/orderInfo'
import OrderPrice from './components/orderPrice'
import OrderBrokerage from './components/orderBrokerage'
import MeasurePictures from './components/measurePictures'
import AuditState from './components/auitState'
import OtherAudit from './components/otherAudit'
import { mapActions, mapGetters } from 'vuex'

export default {
  components: {
    OrderBreadcrumb,
    OrderStateBar,
    OrderInfo,
    OrderPrice,
    OrderBrokerage,
    MeasurePictures,
    AuditState,
    OtherAudit
  },
  data: () => ({
    pictureType: ['measure_pictures', 'completed_pictures']
  }),
  created() {
    this.setOrder(this.$route.params)
  },
  mounted() {
  },
  computed: {
    ...mapGetters('orders', ['order']),
  },
  methods: {
    ...mapActions('orders', [
      'setOrder'
    ])
  }
}
</script>
